<template>
    <div>
        <a-modal
            title="计划详情"
            :visible="visible"
            @ok="visible = false"
            @cancel="visible = false"
            cancelText="关闭"
            :width="1300"
            :footer="null"
            class="registeredDetails-modal"
            :dialogStyle="{top:'20px'}"
        >
            <template slot="footer">
                <div style="display: flex;justify-content: flex-end;">
                    <a-button type="primary" @click="visible = false">关闭</a-button>
                </div>
            </template>
            <div class="registeredDetails-content">
                <table bordercolor="#d9d9d9" style="width: calc(100% - 30px); margin-left: 15px;" border="1">
                    <tr>
                        <th>计划名称</th>
                        <td colspan="5">{{ currentData.fjhmc }}</td>
                    </tr>
                    <tr>
                        <th>审评员类型</th>
                        <td>{{ currentData.fjcylx }}</td>
                        <th>报名日期</th>
                        <td>{{ currentData.fbmksrq }}至{{ currentData.fbmjsrq }}</td>
                        <th>报名状态</th>
                        <td>{{ currentData.fbmzt }}</td>
                    </tr>
                    <tr>
                        <th>发布人</th>
                        <td>{{ currentData.ffbrxm }}</td>
                        <th>发布人所属科室</th>
                        <td>{{ currentData.fssks }}</td>
                        <th>发布日期</th>
                        <td>{{ currentData.ffbrq }}</td>
                        
                    </tr>
                    <tr>
                        <th colspan="6" class="dzyh-th">应报名人数</th>
                    </tr>
                    
                    <tr>
                        <th>组长人数</th>
                        <td>{{ currentData.fzzrs }}</td>
                        <th>组员人数</th>
                        <td>{{ currentData.fzyrs }}</td>
                        <th>预备审评员人数</th>
                        <td>{{ currentData.fybrs }}</td>
                    </tr>
                    <tr>
                        <th colspan="6" class="dzyh-th">实报名人数</th>
                    </tr>
                    <tr>
                        <th>组长人数</th>
                        <td>{{ currentData.fbmzzrs?currentData.fbmzzrs:0 }}</td>
                        <th>组员人数</th>
                        <td>{{ currentData.fbmzyrs?currentData.fbmzyrs:0 }}</td>
                        <th>预备审评员人数</th>
                        <td>{{ currentData.fbmybrs?currentData.fbmybrs:0 }}</td>
                    </tr>
                    
                </table>
            </div>
            <commpVxeTable
                :key="manualKey"
                :isCanWrap="true"
                :canWrapTableHeight="320"
                :config="manualdataTableConfig" 
                :columns="manualcolumnsVxe" 
                :formItem="[]"
                @checkboxChange="checkboxChange"
                ref="acceptanceRegistrationRef"
            >
                <template v-slot:externalOperations="{data}">
                    <vxe-form-item>
                        <template>
                            <a-button class="blue-btn" type="primary" icon="plus-square" @click="addInspectionTaskClick({})">添加审评任务</a-button>
                        </template>
                    </vxe-form-item>
                </template>
                <template v-slot:fcykssj_fcyjssj="{row}">
                    {{ row.fcykssj }}至{{ row.fcyjssj }}<br/>
                    （{{moment(row.fcykssj).format('dddd')}}&nbsp;&nbsp;至&nbsp;&nbsp;{{moment(row.fcyjssj).format('dddd')}}）
                </template>
                <template v-slot:realname_name="{row}">
                    <!-- <a @click="viewClick(row,true)"> -->
                        <span style="padding-right: 21;" v-if="row.realname && row.realname.length == 2">
                            <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                                {{trem}}
                            <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
                            </span>
                        </span>
                        <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
                    <!-- </a> -->
                </template>
                <template v-slot:fstate_default="{row}">
                    {{ row.fstate=='0'?'执行中':(row.fstate=='1'?'已结束':'') }}
                </template>
                <template v-slot:operation_btn="{row}">
                    <a-form layout="inline" class="search-form" >
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" @click="addInspectionTaskClick(row)">编辑</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" @click="detailsClick(row)">详情</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button v-if="row.fbmzt == '报名中'" class="red-btn" type="primary" @click="deleteInspectionTaskClick(row)">删除</a-button>
                        </a-form-item>
                    </a-form>
                </template>
            </commpVxeTable>
            <addInspectionTask ref="addInspectionTaskRef" @addInspectionTaskSuccess="addInspectionTaskSuccess"/>
            <registeredDetails ref="registeredDetailsRef"/>
        </a-modal>
    </div>
</template>
<script>
import { ybmjhqueryBmxmBySqsx, ybmjhdeleteBmjbmx, } from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api'
import addInspectionTask from './addInspectionTask.vue'
import registeredDetails from './registeredDetails.vue'
import moment from 'moment'
export default {
    components:{
        commpVxeTable,
        addInspectionTask,
        registeredDetails,
    },
    props:{

    },
    data(){
        return{
            moment:moment,
            visible:false,
            manualKey:null,
            manualformItem:[
                {
                    label: '真实姓名',
                    model: 'realname',
                }
            ],
            manualdataTableConfig:{
                api: assessCheckApi.ybmjhqueryBmjhListByJbxxid,
                rowId: 'id',
                fywflcode:'001002',
                height:window.innerHeight - 450,
                paramet:{},
                isIdeaText:'',
                autoHidden:true,
            },
            manualcolumnsVxe:[
            { 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '审评任务名称', //列头显示文字
                field: 'fjcbmrwmc',
            },{
                title: '审评日期', //列头显示文字
                field: 'fcykssj',
                width:195,
                slots: {
                    default: 'fcykssj_fcyjssj',
                },
            },{
                title: '审评地点', //列头显示文字
                field: 'fjcdd',
            },{
                title: '审评要求', //列头显示文字
                field: 'fjcyq',
            },{
                title: '已报名组长人数', //列头显示文字
                field: 'fbmzzrs',
                width:124,
            },{
                title: '已报名组员人数', //列头显示文字
                field: 'fbmzyrs',
                width:124,
            },{
                title: '已报名预备审评员人数', //列头显示文字
                field: 'fbmybrs',
                width:165,
            },{
                title: '操作',
                field: 'id',
                titleInterval:true,
                slots: {
                    // 使用插槽模板渲染
                    header:'operation_header',
                    default: 'operation_btn',
                },
                fixed: 'right',
                width:208
            }], 
            
            selectArr:[],
            currentData:{},
            selectData:{},
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            this.currentData = val
            this.manualdataTableConfig.paramet={...val}

            this.manualKey = Date.now()
        },
        addInspectionTaskClick(row){
            this.$refs.addInspectionTaskRef.getData(this.currentData,row)
            this.$refs.addInspectionTaskRef.visible = true
        },
        addInspectionTaskSuccess(){
            this.manualKey = Date.now()
        },
        detailsClick(row){
            this.$refs.registeredDetailsRef.getData({...row})
            this.$refs.registeredDetailsRef.visible = true
        },
        deleteInspectionTaskClick(row){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    ybmjhdeleteBmjbmx({id:row.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.addInspectionTaskSuccess()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
        },
        checkboxChange(val){
            //console.log(val)
        },
        handleOk(){
        }
    }
}
</script>
<style lang="less">
.registeredDetails-modal{
    .ant-modal-body{
        padding: 5px;
    }
    
}
.registeredDetails-content{
    display: flex;
    flex-wrap: wrap;
    th,td{
        padding: 5px;
    }
    td{
        min-width: 130px;
    }
    th{
        width: 140px;
        text-align: center;
        background-color: #e6f7ff;
        font-size: 16px;
    }
    .dzyh-th{
        background: #fff;
        text-align: center;
        font-size: 17px;
    }
    textarea.ant-input{
        margin-top: 4px;
    }
    .ant-form-item{
        // display: flex;
        // align-items: center;
        .ant-form-item-label{
            font-size: 18px;
            font-weight: 600;
            width: 135px;
            font-family:simHei;
            background: #e6f7ff;
            
        }
        .ant-form-item-control-wrapper{
            vertical-align: middle;
        }
        .ant-form-item-control{
           margin-top: 5px;
        }
    }
    .toolbox-form-item{
        width: 50%;
        // padding: 3px;
    }
    .ant-form-item-with-help{
        margin-bottom: 10px;
    }
    .ant-form-item-control-wrapper{
        width: 170px;
    }
    
    .form-model-big-box{
        .form-item-flex-1{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
                
            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
            
            .ant-checkbox-group{
                height: 40px;
                line-height: 40px;
            }
        }
    }
    .form-model-big-box1{
        .ant-form-item-label{
            
            margin: 4px 3px;
            label{
                padding-left: 3px;
                
            }
            
        }
    }
    .ant-form-inline .ant-form-item > .ant-form-item-label{
        vertical-align: middle !important;
    }
    .ant-divider-horizontal.ant-divider-with-text-center{
        margin: 8px 0;
    }
}
</style>